<template>
  <div>
    <Modal v-model="detailPop" width="50" :mask-closable="false" class-name="vertical-center-modal"
      @on-visible-change="OnVisibleChange">
      <div slot="header" class="head-title">{{ $t("event.buy_item") }}</div>
      <div class="detail-content">
        <div class="name">{{ infoList.subject }}</div>
        <div class="info-sty">
          <product-picture :image-list="[getImageSrc(infoList.imageList)]"></product-picture>
          <!-- <img :src="getImageSrc(infoList.imageList)" class="left-sty" alt="100buy"> -->
          <div class="right-info">
            <Row>
              <Col span="12">
              <div class="label-text">
                {{ $t("event.totalAfterDiscount") }}
              </div>
              <div class="price-num">
                <span v-if="userCurrency !== 'CNY'">CNY</span>
                <span v-if="userCurrency !== 'CNY' && currentSelectInfo" class="price-num">{{
                  bigTimes(getDisposePrice("priceCNY"), 0.833) }}</span>
                <span v-if="userCurrency !== 'CNY'" class="price-y">≈</span>
                <span>{{ userCurrency }}</span>
                <span>{{ bigTimes(getDisposePrice("price"), 0.833) }}</span>
              </div>
              </Col>
              <Col span="12">
              <div class="right-label">{{ $t("event.before_label") }}</div>
              <div class="right-price">
                <span v-if="userCurrency !== 'CNY'">CNY</span>
                <span v-if="userCurrency !== 'CNY' && currentSelectInfo">{{
                  getDisposePrice("priceCNY")
                }}</span>
                <span v-if="userCurrency !== 'CNY'" class="price-y">≈</span>
                <span>{{ userCurrency }}</span>
                <span>{{ getDisposePrice("price") }}</span>
              </div>
              </Col>
            </Row>
            <div class="tips-text">{{ $t("event.detail_price_tips") }}</div>
          </div>
        </div>
        <Divider />
        <!-- 规格可滚动 -->
        <div class="info-select">
          <div class="scroll-sty">
            <commodity-specification v-if="valueToPassIsReady" @on-change="onSelect"
              :info="infoList"></commodity-specification>
            <div class="type-item order-num">
              <div class="type-label">{{ $t("goods.quantity") }}:</div>
              <div class="left">
                <div class="left-content">
                  <InputNumber :min="infoList.startQuantity" v-model="form.quantity" size="large" controls-outside>
                  </InputNumber>
                  <span class="amount-sale" v-if="currentSelectInfo">{{ $t("goods.inventory") }}({{
                    currentSelectInfo.stock
                  }})</span>
                </div>
                <span class="min-quantity" v-if="infoList.startQuantity">{{ $t("goods.minimumQuantity") }}：{{
                  infoList.startQuantity
                }}</span>
              </div>
            </div>
            <div class="tips-info">{{ $t("event.productsSub") }}</div>
            <div v-html="infoList.description"></div>
          </div>
        </div>
        <Divider />
      </div>
      <div slot="footer" class="footer-sty">
        <div></div>
        <div class="flex-sty">
          <Checkbox v-model="agree">{{ $t("event.iAgree") }}</Checkbox>
          <div class="add-cart" @click="addMet">
            <img src="@/assets/images/activity/add_cart.png" class="cart-add" alt="" />
            {{ $t("event.add_cart_label") }}
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { bigTimes } from "@/common/digital-computation";
import { activityDetail, doubleCartAdd } from "@/api/activity";
import { mapState } from "vuex";
import CommoditySpecification from "@/views/main/goods/goods-details/commodity-specification";
import { debounce } from "@/common/common";
import ProductPicture from "@/views/main/user/components/product-picture";
export default {
  components: { CommoditySpecification, ProductPicture },
  data() {
    return {
      bigTimes,
      currentSelectInfo: {
        price: "0",
        priceCNY: "0",
        image: "",
        originalPriceCNY: "0",
        originalPrice: "0",
      },
      detailPop: false,
      form: {
        source: 2,
        remarks: "",
      },
      agree: false,
      search: {
        channel: "TAOBAO",
      },
      infoList: "",
      valueToPassIsReady: false,
    };
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      userCurrency: (state) => {
        return state.user.userCurrency.code;
      },
      userInfo: (state) => {
        //  ENABLE 老用户，DISABLE 新用户
        return state.user.userInfo.orderFlag == "DISABLE";
      },
    }),
  },
  watch: {
    // 确保传给组件的infoList有值
    infoList(newValue) {
      if (newValue !== null) {
        this.valueToPassIsReady = true;
      }
    },
  },
  methods: {
    getDetail(spuNo) {
      this.search.spuNo = spuNo;
      activityDetail(this.search).then((res) => {
        this.infoList = res.result;
        this.infoList.description = this.infoList.description.replace(
          /\s*href="[^"]*"/gi,
          ""
        );
        this.form.channel = this.infoList.channel;
        this.form.expressFee = this.infoList.expressFee; // 国内运费
        this.form.quantity =
          this.infoList.startQuantity < 1 ? 1 : this.infoList.startQuantity; // 商品数量(计算金额用)，必填
        this.form.spuNo = this.infoList.spuNo; // SPU产品编号
        this.detailPop = true;
      });
    },
    getImageSrc(imageList) {
      return imageList && imageList.length > 0 ? imageList[0] : "";
    },
    onSelect(info) {
      // 选择商品规格
      this.currentSelectInfo = info;
      this.form.skuNo = info.skuNo;
      // this.$emit("on-change", info);
    },
    addMet: debounce(function () {
      if (!this.agree) {
        this.$Message.error(this.$t("pay.check"));
        return false;
      }
      doubleCartAdd(this.form).then((res) => {
        if (res.code == 200) {
          this.$store.commit("setDoubleCartNum", res.result.cartSize);
          this.$Message.success(this.$t("goods.addSuccess"));
          this.detailPop = false; //关闭弹框
          this.$emit("addSuccess"); //加购成功，父组件刷新购物车数量
        }
      });
    }),
    OnVisibleChange(value) {
      if (value == false) {
        this.valueToPassIsReady = false;
      }
    },
    getDisposePrice(type) {
      let val = this.currentSelectInfo[type]
        ? this.currentSelectInfo[type]
        : this.infoList[type]
          ? this.infoList[type]
          : this.infoList.saleInfo.priceRangeList &&
            this.infoList.saleInfo.priceRangeList.length > 0
            ? this.infoList.saleInfo.priceRangeList[0][type]
            : this.infoList.saleInfo.priceRanges &&
              this.infoList.saleInfo.priceRanges.length > 0
              ? this.infoList.saleInfo.priceRanges[0][type]
              : 0;
      return val || 0;
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 18px;
  position: relative;

  &::before {
    /* 1 */
    display: block;
    content: "";
    border-radius: 18px;
    border: 8px solid transparent;
    background: linear-gradient(271deg,
        rgba(254, 49, 97, 1),
        rgba(53, 231, 207, 1)) border-box;
    /* 2 */
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    /* 3 */
    -webkit-mask-composite: xor;
    /* 4 */
    mask-composite: exclude;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

:deep(.ivu-modal-header) {
  border: none;
  padding: 28px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 0 32px 28px 32px;
  position: relative;
  z-index: 9;
}

:deep(.ivu-modal-close) {
  position: absolute;
  top: 20px;
  right: 26px;
}

:deep(.ivu-modal-close .ivu-icon-ios-close) {
  color: #333333;
  font-size: 64px;
  font-weight: 800;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .big-img {
    width: 320px;
    height: 320px;
    border-radius: 10px 10px 10px 10px;
    border: 4px solid #ffffff;
  }

  .head-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32px;
    color: #1e1714;
    line-height: 38px;
  }

  .detail-content {
    position: relative;
    z-index: 9;

    .name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1e1714;
      line-height: 23px;
    }

    .info-sty {
      display: flex;
      gap: 24px;
      margin-top: 18px;

      .left-sty {
        width: 120px;
        height: 120px;
        border-radius: 10px 10px 10px 10px;
        background: #ffffff;
        cursor: pointer;
      }

      .right-info {
        flex: 1;

        .label-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #fe3161;
          line-height: 18px;
          margin: 8px 0;
        }

        .price-num {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 32px;
          color: #fe3161;
          line-height: 38px;

          .price-num {
            font-size: 42px;
            line-height: 42px;
          }

          span {
            font-size: 20px;
            line-height: 23px;
          }
        }

        .right-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #9a27e9;
          line-height: 18px;
          margin: 8px 0 18px 0;
        }

        .right-price {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 17px;
          color: #9a27e9;
          line-height: 20px;
          text-decoration: line-through;
        }

        .tips-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #74767f;
          line-height: 19px;
          margin-top: 9px;
        }
      }
    }

    .info-select {
      // height: 200px;
      // overflow-y: scroll;

      .scroll-sty {
        height: 430px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin-bottom: 24px;

        .tips-info {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #aeb0b9;
          line-height: 22px;
          margin-top: 24px;
        }

        .type-item {
          margin-top: 24px;

          .type-label {
            display: block;
            margin-right: 6px;
            margin-bottom: 6px;
            color: @t-title-color;
            font-size: 19px;
            font-weight: 500;
          }

          .textarea {
            margin-bottom: 16px;

            &:deep(.ivu-input) {
              font-size: 19px;
              border-radius: 11px;
              margin-top: 16px;
              padding: 16px;
            }
          }
        }

        .order-num {
          display: flex;
          flex-direction: column;
          margin-top: 24px;

          .type-label {
            display: flex;
            align-items: center;
            margin-bottom: 0px;
            height: 32px;
            margin-bottom: 16px;
            font-size: 19px;
            font-weight: 500;
          }

          .left {
            .left-content {
              display: flex;
              align-items: center;
            }

            .min-quantity {
              color: @t-text-color;
              font-size: 16px;
              display: block;
              margin-top: 16px;
            }
          }

          .amount-sale {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #afafaf;
            line-height: 22px;
            margin-left: 32px;
          }
        }
      }
    }
  }

  .footer-sty {
    display: flex;
    justify-content: space-between;

    :deep(.ivu-checkbox) {
      margin-right: 10px;
    }

    :deep(.ivu-checkbox-default) {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: #1e1714;
      line-height: 22px;
    }

    .flex-sty {
      display: flex;
      align-items: center;
      gap: 28px;

      .add-cart {
        padding: 14px 45px;
        background: #1e1714;
        border-radius: 10px 10px 10px 10px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        line-height: 23px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 20px;

        .cart-add {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}
</style>
